<template>
  <div class="bigPing">
    <div id="index" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <div class="d-flex jc-center top-box">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
              <dv-decoration-8
                class="dv-dec-8"
                :color="decorationColor"
                style="width: 450px; height: 120px"
              />
              <div class="title">
                <span class="title-text">四川众利合展玻璃有限公司</span>
              </div>
              <div class="logo">
               <img :src="company_logo" alt="">
               {{ company_name }}
              </div>
              <div class="time">
                <span class="text"
                  >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
                >
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="decorationColor"
                style="width: 450px; height: 120px"
              />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
          <div class="body-box">
            <div class="body-item">
              <dv-border-box-13>
                <topLeft />
              </dv-border-box-13>
              <dv-border-box-13 style="margin: 20px 0">
                <centerLeft />
              </dv-border-box-13>
              <dv-border-box-13>
                <bottomLeft> </bottomLeft>
              </dv-border-box-13>
            </div>
            <div class="body-item">
              <div class="fullView">
                <div class="textTitle">
                  <dv-decoration-7
                    ><div class="sub-textTitle">
                      智慧工厂MES系统
                    </div></dv-decoration-7
                  >
                </div>
                <dv-border-box-10>
                  <div class="png">
                    <center />
                  </div>
                </dv-border-box-10>
              </div>
              <div class="body-item-production">
                <dv-border-box-13>
                  <bottomCenter />
                </dv-border-box-13>
              </div>
            </div>
            <div class="body-item">
              <dv-border-box-13>
                <rightTop />
              </dv-border-box-13>
              <dv-border-box-13 style="margin: 20px 0">
                <rightCenter />
              </dv-border-box-13>
              <dv-border-box-13>
                <bottomRight />
              </dv-border-box-13>
            </div>
          </div>
          <div class="bottom-text">©本系统由通用玻璃软件提供技术支持</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import { formatTime } from "@/utils/newDate.js";
import topLeft from "./topLeft.vue/index.vue";
import centerLeft from "./centerLeft/index.vue";
import bottomLeft from "./bottomLeft/index.vue";
import bottomCenter from "./bottomCenter/index.vue";
import rightTop from "./rightTop/index.vue";
import rightCenter from "./rightCenter/index.vue";
import bottomRight from "./bottomRight/index.vue";
import center from "./center/index.vue"
export default {
  components: {
    topLeft,
    centerLeft,
    bottomLeft,
    bottomCenter,
    rightTop,
    rightCenter,
    bottomRight,
    center
  },
  mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
    };
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/index.scss";
.png {
  width: 96%;
  height: 94%;
  // margin: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  img,
  video {
    width: 100%;
    height: 100%;
  }
}
::v-deep .border-box-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bigPing {
  width: 100%;
  height: 100%;
  background-color: #010003;
}
.chartsLine {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-8%);
}
.bottom-box {
  width: 100% !important;
}
.company-name {
  font-size: 40px;
  letter-spacing: 3.5px;
}
.top-box {
  position: relative;
  height: 70px;
}
.time {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.logo {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 18px;
  display: flex;
  align-items: center;
  img{
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
}
.fullView {
  position: relative;
  flex: 1.4;
  margin: 180px 0px 0px 0px;
  padding-bottom: 0px;
  transform: translateY(-60px);
  .textTitle {
    width: 400px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
    // display: flex;
    // align-items: center;
    font-size: 30px;
    letter-spacing: 10px;
    background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
    color: transparent;
    -webkit-background-clip: text;
    .sub-textTitle {
      display: flex;
      justify-content: center;
      margin-left: 10px;
    }
  }
}
.body-item-production {
  flex: 1;
}
.bottom-text {
  width: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  letter-spacing: 3px;
}
</style>
